<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="box1">
      <van-cell v-if="flag" :title="Name + Tel"  size="large" is-link :label="Address" @click="change" />
      <van-cell v-else title="请添加收获人信息"  size="large" is-link @click="change" />
      <van-card
        v-for="item of orderlist"
        :key="item.orderid"
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
<!--      <router-view></router-view>-->
    </div>
    <div class="pay">
      <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop="disShow">
          <div class="block" />
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  NavBar,
  Card,
  Cell,
  CellGroup,
  SubmitBar,
  PasswordInput,
  NumberKeyboard,
  Overlay
} from 'vant'

import { confirmOrder } from '@/api/order'

Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(SubmitBar)
Vue.use(PasswordInput)
Vue.use(NumberKeyboard)
Vue.use(Overlay)

export default {
  data () {
    return {
      orderlist: [],
      Name: '蕾蕾姐姐',
      Tel: '12012012012',
      Address: '北京千峰科技职业技术学院',
      price: 0,
      show: false,
      flag: false // 判断有没有订单的地址信息
    }
  },
  methods: {
    onSubmit () {
      this.show = true
    },
    change () {
      this.$router.push('/order/' + this.$route.params.time + '/addAddress')
    },
    disShow () {
      this.show = false
    }
  },
  mounted () {
    confirmOrder({
      userid: localStorage.getItem('userid'),
      time: this.$route.params.time // 动态获取参数
    }).then(res => {
      console.log('你好', res.data)
      console.log('你好', res.data.data)
      res.data.data.forEach((item) => {
        this.price += item.originprice * item.num
      })
      this.price *= 100
      this.orderlist = res.data.data
      this.flag = res.data.flag
    })
    this.Name = localStorage.getItem('Name')
    this.Tel = localStorage.getItem('Tel')
    this.Address = localStorage.getItem('Addresss')
  }
}
</script>

<style lang="stylus" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 238px;
  height: 238px;
  background-color: #fff;
  background-image: url('../../../public/img/Wechat.png')
}
</style>
